<template>
	<view class="contain">
		<view class="bg" :style="{'background':themeColors}"></view>
		<view class="title" @tap="goMessage">
			<image :src="head"></image>
			<view class="user">
				<view style="color: #FFFFFF;">{{ user}}</view>
				<view style="font-size: 24rpx;color: #FFFFFF;">{{ write }}</view>
			</view>
		</view>
		<view class="list">
			<view class="list-all">
				<view class="list-item" @tap="goModify">
					<view class="item-left">
						<image src="../../static/images/xiugaimima.png" mode="widthFix"></image>
						<!--<view>修改密码</view>-->
						<view>{{lang.my.changepassword}}</view>
					</view>
					<image src="../../static/images/enters.png"></image>
				</view>
				<view class="list-item" @tap="userClick(0)">
					<view class="item-left">
						<image src="../../static/images/wodexiazai.png" mode="widthFix"></image>
						<!--<view>我的参数</view>-->
						<view>{{lang.my.mypara}}</view>
					</view>
					<image src="../../static/images/enters.png"></image>
				</view>
				<view class="list-item" @tap="userClick(1)">
					<view class="item-left">
						<image src="../../static/images/guanyuAPP.png" mode="widthFix"></image>
						<!--<view>关于APP</view>-->
						<view>{{lang.my.abouttheAPP}}</view>
					</view>
					<image src="../../static/images/enters.png"></image>
				</view>
			</view>
			<!--<view class="btn1" @click="pagesChange">返回主功能选择</view>-->
			<view class="btn1" :style="{'background':themeColors}" @click="pagesChange">{{lang.my.returnmaindelection}}</view>
			<!--<view class="btn2" @click="userLoginOut">退出登录</view>-->
			<view class="btn2" @click="userLoginOut">{{lang.my.loggedout}}</view>
		</view>
		<!--<mix-modal ref="mixModal" title="温馨提示" text="你确定退出吗?" @onConfirm="onConfirm"></mix-modal>-->
		<mix-modal ref="mixModal" :title="lang.my.prompt" :text="lang.my.sureout" @onConfirm="onConfirm"></mix-modal>
	</view>
</template>

<script>
import {mapState, mapMutations} from "vuex";
import mixModal from "@/components/mix-modal/mix-modal.vue";
export default {
	components: {
		mixModal
	},
	data() {
		return {
			user:uni.getStorageSync("nickName"),
			head:uni.getStorageSync("head"),
			text: "",
			write:uni.getStorageSync("write")
		};
	},
	computed: {
		...mapState(["lang","themeColors"])
	},
	methods: {
		userClick(type) {
			let url = type == 0 ? "/pages/file/file?souce=0" : "/pages/public/aboutwe";
			uni.navigateTo({
				url
			});
		},
		onConfirm() {
			// #ifdef APP-PLUS
			this.$store.commit('setParamList', []);
			uni.closeBluetoothAdapter({
				complete() {
					
					uni.reLaunch({
						url:'/pages/login/login'
					})
				}
			});
			// #endif
		},
		userLoginOut() {
			this.$refs.mixModal.open();
		},
		pagesChange() {
			uni.switchTab({
				url: "/pages/set/set"
			});
		},
		goMessage() {
			uni.navigateTo({
				url: "/pages/message/message"
			});
		},
		goModify() {
			uni.navigateTo({
				url: "/pages/modify/modify"
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	width: 100%;
	height: 100%;
	background: #fbfbfb;
}

.contain {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;

	.bg {
		width: 100%;
		height: 300rpx;
		// background: #005883;
		//background: #B7945C;
		position: absolute;
		top: 0;
		left: 0;
	}

	.title {
		width: 100%;
		padding: 80rpx 28rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		font-size: 28rpx;
		z-index:9;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.user {
			height: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			font-size: 28rpx;
			color: #ffffff;
			margin-left: 28rpx;
		}
	}

	.list {
		width: 100%;
		padding: 0 28rpx;
		box-sizing: border-box;
		margin-top: 24rpx;

		.btn1 {
			width: 80%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 30rpx;
			color: #ffffff;
			margin: 120rpx auto 0;
			// background: #005883;
			//background: #B7945C;
			border-radius: 30px;
		}

		.btn2 {
			width: 80%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 30rpx;
			color: #005883;
			margin: 60rpx auto 0;
			border: 1px solid #005883;
			border-radius: 30px;
		}

		.list-all {
			width: 100%;
			background: #ffffff;
			border-radius: 6px;
			z-index: 9;
			position: relative;

			.list-item {
				width: 100%;
				padding: 40rpx 32rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #eee;

				.item-left {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					color: #333;

					image {
						width: 38rpx;
						margin-right: 30rpx;
					}
				}

				image {
					width: 38rpx;
					height: 38rpx;
				}
			}

			.list-item:last-child {
				border-bottom: none;
			}
		}
	}
}
</style>
